import { Table as AntdTable, TableColumnType, Pagination } from 'antd';
import { useEffect, useRef, useState, ReactNode } from 'react';
import './table.less';
export interface IColumns<T = any> extends TableColumnType<T> {
 
}
export interface IColumnRender<key extends keyof S, S extends Object> {
    (value: S[key], obj: S): ReactNode;
}
export interface ITableProps {
    rowKey: string;
    columns: IColumns[]; 
    datas: any;
    total: number; 
    pageSize: number;
    page: number;
    isLoading: boolean;
    onPageSizeChange: (current: number, size: number)=>void;
    onPageChange: (page: number)=>void;
}
export function Table(props: ITableProps) {
    let {columns, datas} = props;
    let containerRef = useRef<HTMLDivElement>(null);
    let pageContainerRef = useRef<HTMLDivElement>(null);
    let [tableMaxHeight, setTableMaxHeight ] = useState('100px');
    useEffect(() => {
        function windowResize() {
            setTableMaxHeight((containerRef.current!.clientHeight - 120).toString() + 'px');
        }
        windowResize();
        setTableMaxHeight((containerRef.current!.clientHeight - 120).toString() + 'px');
        return () => {
            window.removeEventListener('resize', windowResize )
        }
    }, []);
    return (
        <div className="generate-table" ref={containerRef}>
            <div className="table-container">
                <AntdTable 
                rowKey={props.rowKey} 
                columns={columns} 
                dataSource={datas} 
                pagination={false} 
                loading={props.isLoading}
                scroll={{y: tableMaxHeight}}/>
            </div>
            {
                props.total > 10 ? (
                    <div className="page-container" ref={pageContainerRef}>
                        <Pagination
                        total={props.total}
                        current={props.page}
                        pageSize={props.pageSize}
                        showSizeChanger
                        showQuickJumper
                        showTotal={total => `共 ${total} 条`}
                        onChange={props.onPageChange}
                        onShowSizeChange={props.onPageSizeChange}
                        />
                    </div>
                ):''
            }

        </div>
    );
}